<template>
    <div>
        <ClientOnly>
            <div class="flex items-center justify-center h-screen overflow-hidden bg-#F8F8F8 min-h-600px">
                <div class="w-900px h-520px bg-white bg-cover rounded-md shadow-lg">

                    <div class="bg-[url('/img/login-bg.png')] py-4 ">
                        <div class="text-#ac8458 float-left cursor-pointer" @click="router.go(-1)"><i
                                class="i-ri:arrow-left-s-line h-30px w-30px text-#ac8458 text-center" />返回登录</div>
                        <b class="text-1.2rem mx-30%">个人用户注册</b>
                    </div>
                    <div class="grid grid-cols-[120px_1fr] items-center gap-y-[20px] gap-x-[1px] py-5 px-18">
                        <!-- <span class="text-left">登录账号<b class="text-red-500 p-l-10px">*</b></span>
                        <input placeholder="请输入账号"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="registerData.username" /> -->
                            <span class="text-left">用户昵称</span>
                        <input placeholder="请输入用户名"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="registerData.nickname" />
                            <span class="text-left">手机号</span>
                        <input placeholder="请输入手机号"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="registerData.phone" />
                            <span class="text-left">邮箱</span>
                        <input placeholder="请输入邮箱"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px   "
                            v-model="registerData.email" />
                            <!-- <span class="text-left">密码<b class="text-red-500 p-l-10px">*</b></span>
                        <input placeholder="请输入密码"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="registerData.password" />
                            <span class="text-left">确认密码<b class="text-red-500 p-l-10px">*</b></span>
                        <input placeholder="请再次输入密码"
                            class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                            v-model="registerData.confirmPassword" /> -->
                    </div>
                    <div class="mx-25% my-6">
                        <button class="btn bg-white text-black w-200px border-1px border-#AC8358 mr-10%" @click="reset"> 重置 </button>
                        <button class="btn w-200px" @click="Register"> 注册 </button>
                    </div>



                </div>
            </div>
        </ClientOnly>
    </div>

</template>

<script lang="ts" setup>
import { userRegister } from '~/api/login'
const router = useRouter()
const registerData = ref({
    username: "",         // 用户名
    nickname: "",         // 用户昵称
    password: "",          // 密码
    phone:"",             // 手机号
    email: "",            // 邮箱
    confirmPassword: "",  // 确认密码
   
})
function reset() {
    registerData.value = {
        username: "",
        nickname: "",
        password: "",
        phone: "",
        email: "",
        confirmPassword: "",
    }
}
function Register() {
    if(registerData.value.phone==''||registerData.value.email==''||registerData.value.nickname==''){
        ElMessage.error('请填写完整信息')
        return
    }
    userRegister(registerData.value).then((res) => {
        console.log(res)
        if (res.state === "SUCCESS") {
            ElMessage.success(`注册成功,默认密码为手机号后6位`)
        } else {
            ElMessage.error('注册失败')
        }
    }).catch((err) => {
        console.log(err)
        ElMessage.error('注册失败')
    })


}
</script>

<style lang="scss" scoped>
.btn-on {
    border-bottom: 4px solid #ac8458;
}

.jizhu {
    &:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
        color: #55637dd9
    }
}
</style>